<template lang="pug">
.mutil-leavel-nav(v-show="getNavMenus && getNavMenus.length")
  .scroll-wrap(v-scroll.x='')
    .tab-item(
      v-for='(item, index) in getNavMenus',
      :key='index',
      @click.stop='handleItemClick(item, index)',
    )
      van-icon.tab-item-icon(name="bars" color="#ffffff" size="18")
      span {{item.title}}
      p.new-text.pos-a(v-if="isLanjiukj && !item.is_menu_watch") new

</template>

<script>
import { mapGetters } from 'vuex'
import { DeepCloneData, sortId, isJSON } from '@/utils'
import menuMixin from '@/mixins/menu'
import $API from '@/api/services'

export default {
  mixins: [menuMixin],
  data() {
    return {
      isLanjiukj: $globalconfig.MODULES.IS_LANJIUKJ_PROGRAM_OPEN,
      list: [],
      baseUrl: $globalconfig.URLS.API,
    }
  },
  computed: {
    ...mapGetters(['menuData']),
    getNavMenus() {
      if (this.menuData && this.menuData.navmenu && this.menuData.navmenu.length > 0) {
        return this.menuData.navmenu
      } else {
        return []
      }
    },
  },
  methods: {
    getNewTextShow(item) {
      if (!item.is_menu_watch) {
        return true
      }
      return false
    },
    // 异步请求同步顺序执行
    async outfnOrder (arr) {
      let that = this
      // 这里要用function，不能用箭头函数，arguments函数内部的参数(i, length)
      function test(i, length) {
        return new Promise((resolve, reject) => {
          let child = arr[i]
          let childObj = []
          if (child.type_id == 19) {
            if (isJSON(child.data)) {
              childObj = JSON.parse(child.data)
              childObj.sort(sortId)
            }
            child.newData = childObj
            resolve(arguments)
          } else if (child.type_id == 1) {
            childObj = [{
              contents: child.data,
              sort: 1,
              text: "链接",
              type: 7,
            }]
            child.newData = childObj
            resolve(arguments)
          } else if (child.type_id == 2) {
            $API('getGraphicDescript', [child.data]).then(res => {
              if (res && res.code == 100) {
                childObj = [{
                  contents: res.data.contents,
                  sort: 1,
                  text: "图文",
                  type: 1,
                }]
                child.newData = childObj
                resolve(arguments)
              } else {
                child.newData = childObj
                resolve(arguments)
              }
            })
          } else if (child.type_id == 4) {
            childObj = [{
              contents: child.data,
              sort: 1,
              text: "联系方式",
              type: 2,
            }]
            child.newData = childObj
            resolve(arguments)
          } else if (child.type_id == 3) {
            let formdata = child.data.split('|')
            childObj = [{
              contents: formdata[2] || '',
              location_lng: formdata[1] || '',
              location_lat: formdata[0] || '',
              sort: 1,
              text: "导航地址",
              type: 3,
            }]
            child.newData = childObj
            resolve(arguments)
          } else if (child.type_id == 8) {
            let formdata = child.data.split('|')
            childObj = [{
              contents: formdata[0],
              fullaudio: this.baseUrl + formdata[1],
              sort: 1,
              text: "音频",
              type: 5,
            }]
            child.newData = childObj
            resolve(arguments)
          } else if (child.type_id == 18) {
            childObj = [{
              contents: child.datastr,
              fullvideo: this.baseUrl + child.data,
              sort: 1,
              text: "视频",
              type: 6,
            }]
            child.newData = childObj
            resolve(arguments)
          }
        }).then(() => {
          if(arguments[0] + 2 < arguments[1]) {
            return test(arguments[0] + 1, arguments[1])
          }
        })
      }
      try {
        // 阻塞一下，保证pro取到特定的值之后再输出
        await test(0, arr.length + 1)
      } catch(err) {
        console.log(err)
      }
      that.$vgo.emit('dialog:mutil', {
        biaoji: 1,
        data: arr,
      })
    },
    // 点击菜单事件
    handleItemClick(info, index) {
      let item = DeepCloneData(info)

      if (this.isLanjiukj && this.getNewTextShow(item)) {
        this.$store.dispatch('setNavmenuNew', {level: 0, id: item.menu_id || item.id})
        $API('sendMenuClick', [item.menu_id || item.id])
      }

      let obj = null

      if (item.children && item.children.length > 0) {
        obj = item.children
      } else {
        obj = [item]
      }
      this.outfnOrder(obj || [])
    },
  }
}
</script>

<style lang="stylus" scoped>
.mutil-leavel-nav
  position absolute
  left 0
  top 0
  z-index 3
  width 100%
  height 40px
  overflow hidden
  .scroll-wrap
    display flex
    height 40px
    .tab-item
      cursor pointer
      height 40px
      line-height 40px
      padding 0 5px
      text-align center
      overflow hidden
      position relative
      .new-text
        right -1px
        top -14px
        z-index 2
        height 0
        color #f00
        font-size 11px
      .tab-item-icon
        vertical-align sub
      span
        font-size 15px
        color #fff
</style>
